<template>
	<view>
		<navbar title="人员查询" :isbg="false" :autoBack="true" :opacity='1'></navbar>
		<view class="con">
			<view class="box">
				<view class="box__title">
					<view class="box__title__line">
						
					</view>
					添加员工
				</view>
				<view class="box__item">
					<view class="box__item__label">
						新员工:
					</view>
					<input type="text" placeholder="请输入员工姓名" class="box__item__inp" v-model="form.username"/>
				</view>
				<view class="box__item">
					<view class="box__item__label">
						手机号:
					</view>
					<input type="text" placeholder="请输入联系电话" class="box__item__inp" v-model="form.mobile"/>
				</view>
				<view class="box__item">
					<view class="box__item__label">
						验证码:
					</view>
					<input type="text" placeholder="" class="box__item__inp" v-model="form.code"/>
					<u-button text="获取验证码" color="#2A51FA" :customStyle="{
						height:'66rpx',
						width:'192rpx',
						margin:0,
						fontSize:'26rpx',
						marginLeft:'40rpx',
						borderRadius:'10rpx'
					}"></u-button>
					
				</view>
				<view class="box__item" @click="clickbm">
					<view class="box__item__label">
						部门:
					</view>
					<view class="box__item__inp">
						{{depart?depart:'请选择部门'}}
					</view>
				</view>
				<view class="box__item__label" style="font-size: 26rpx;margin: 37rpx 0 79rpx;">
					短信验证码发送到该手机，请在10分钟输入验证码
				</view>
				<u-button text="下一步" @click="submit" color="#2A51FA" :customStyle="{
					height:'95rpx',
					width:'630rpx',
					margin:0,
					fontSize:'30rpx',
					borderRadius:'20rpx'
				}"></u-button>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" keyName='name' :loading="loading" @close='show=false' @cancel='show=false' @confirm='confirm'></u-picker>
	</view>
</template>

<script>
	import datagl from '@/api/_datagl.js'
	export default {
		data() {
			return {
				loading:false,
				show:false,
				form:{
					username:'',
					mobile:'',
					depart_id:'',
					code:''
				},
				depart:'',
				columns:[]
			};
		},
		methods:{
			async submit(){
				let {
					username,mobile,depart_id,code
					
				} = this.form
				if(!username){
					uni.$u.toast('请输入姓名')
					return
				}
				if(!mobile){
					uni.$u.toast('请输入联系电话')
					return
				}
				if(!code){
					uni.$u.toast('请输入验证码')
					return
				}
				if(!depart_id){
					uni.$u.toast('请选择部门')
					return
				}
				let res = await datagl.addUser(this.form)
				if(res.data.code==1){
					uni.navigateBack()
				}
				
			},
			async clickbm(){
				this.loading=true
				this.columns=[]
				this.show=true
				let res = await datagl.getDepartList()
				if(res.data.code==1){
					this.loading=false
					this.columns.push(res.data.data)
				}
			},
			confirm(e){
				this.depart=e.value[0].name
				this.form.depart_id=e.value[0].id
				this.show=false
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F8F8F8;
}
.con{
	padding: 30rpx;
	.box{
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 35rpx 4rpx 48rpx 30rpx;
		&__title{
			display: flex;
			align-items: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #6D6D6D;
			line-height: 28rpx;
			margin-bottom: 10rpx;
			&__line{
				width: 6rpx;
				height: 27rpx;
				background: #2DA1E0;
				border-radius: 3rpx 3rpx 3rpx 3rpx;
				margin-right: 10rpx;
			}
		}
		&__item{
			height: 100rpx;
			border-bottom: 2rpx solid #F9F9F9;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 25rpx;
			&__label{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #6D6D6D;
				line-height: 38rpx;
			}
			&__inp{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #020202;
				line-height: 38rpx;
				text-align: right;
				flex: 1;
			}
		}
	}
}
</style>
